<template>
  <div>
    <div class="handle-box">
      <el-select
        style="width: 140px"
        class="mrb10"
        v-model="pagination.sortId"
        placeholder="请选择分类"
        @change="sortChange"
      >
        <el-option
          v-for="item in sorts"
          :key="item.key"
          :label="item.value"
          :value="item.key"
        >
        </el-option>
      </el-select>
      <el-select
        style="width: 140px"
        class="mrb10"
        :disabled="select"
        v-model="pagination.labelId"
        placeholder="请选择标签"
      >
        <el-option
          v-for="item in labels"
          :key="item.key"
          :label="item.value"
          :value="item.key"
        >
        </el-option>
      </el-select>
      <el-input
        v-model="pagination.articleTitle"
        placeholder="文章标题"
        class="handle-input mrb10"
      ></el-input>
      <el-button type="primary" icon="el-icon-search" @click="searchArticles()">搜索</el-button>
      <el-button type="danger" @click="clearSearch()">清除参数</el-button>
      <el-button type="primary" @click="$router.push({ path: '/editArticle' })"
      >新增文章
      </el-button
      >
    </div>
    <el-table
      :data="articles"
      border
      class="table"
      header-cell-class-name="table-header"
    >
      <el-table-column
        prop="articleTitle"
        label="文章标题"
        align="center"
        width="150px"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="封面" align="center">
        <template slot-scope="scope">
          <el-image
            lazy
            class="table-td-thumb"
            :src="scope.row.articleCover"
            fit="cover"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="sortName"
        label="分类"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="labelName"
        label="标签"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="viewCount"
        label="浏览量"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="commentCount"
        label="评论数"
        align="center"
      ></el-table-column>
      <el-table-column label="是否可见" align="center" width="150px">
        <template slot-scope="scope">
          <el-tag :type="scope.row.viewStatus === false ? 'danger' : 'success'" disable-transitions>
            {{ scope.row.viewStatus === false ? "不可见" : "可见" }}
          </el-tag>
          <el-switch @click.native="viewStatus(scope.row)" v-model="scope.row.viewStatus"></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="是否启用评论" align="center" width="150px">
        <template slot-scope="scope">
          <el-tag :type="scope.row.commentStatus === false ? 'danger' : 'success'" disable-transitions>
            {{ scope.row.commentStatus === false ? "否" : "是" }}
          </el-tag>
          <el-switch @click.native="commentStatus(scope.row)" v-model="scope.row.commentStatus"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="是否推荐" align="center" width="150px">
        <template slot-scope="scope">
          <el-tag :type="scope.row.recommendStatus === false ? 'danger' : 'success'" disable-transitions>
            {{ scope.row.recommendStatus === false ? "否" : "是" }}
          </el-tag>
          <el-switch @click.native="recommendStatus(scope.row)" v-model="scope.row.recommendStatus"></el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        width="180px"
      ></el-table-column>
      <el-table-column
        prop="updateTime"
        label="最终修改时间"
        align="center"
        width="180px"
      ></el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
          >编辑
          </el-button
          >
          <el-button
            type="text"
            icon="el-icon-delete"
            style="color: var(--orangeRed)"
            @click="deleteArticle(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :current-page="pagination.current"
        :page-size="pagination.size"
        :total="pagination.total"
        @current-change="handlePageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      pagination: {
        current: 1,
        size: 10,
        total: 0,
        articleTitle: "",
        sortId: null,
        labelId: null,
      },
      articles: [],
      sorts: [],
      labels: [],
      select: true
    };
  },

  computed: {},

  watch: {},

  created() {
    this.getArticles();
    this.getSort();
  },

  mounted() {
  },

  methods: {
    clearSearch() {
      this.pagination = {
        current: 1,
        size: 10,
        total: 0,
        articleTitle: "",
        sortId: null,
        labelId: null,
      };
      this.getArticles();
    },
    getArticles() {
      this.$createHttp.articlePage(this.pagination).then((res) => {
        if (res.code === 200) {
          this.articles = res.data.records;
          this.pagination.total = res.data.total;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    handlePageChange(val) {
      this.pagination.current = val;
      this.getArticles();
    },
    searchArticles() {
      this.getArticles();
    },
    viewStatus(row) {
      this.$createHttp.changeViewStatus(row).then(res => {
        if (res.code === 200) {
          this.$message({
            message: "修改成功！",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
      this.getArticles();
    },
    commentStatus(row) {
      this.$createHttp.changeCommentStatus(row).then(res => {
        if (res.code === 200) {
          this.$message({
            message: "修改成功！",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
      this.getArticles();
    },
    recommendStatus(row) {
      this.$createHttp.changeRecommendStatus(row).then(res => {
        if (res.code === 200) {
          this.$message({
            message: "修改成功！",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
      this.getArticles();
    },
    deleteArticle(id) {
      this.$confirm('确认删除该文章?').then(_ => {
        this.$createHttp.articleDelete(id).then(res => {
          if (res.code === 200) {
            this.$message({
              message: "删除成功!",
              type: "success"
            })
            this.getArticles();
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            })
          }
        })
      })
    },
    handleEdit(item) {
      this.$router.push({path: "/editArticle", query: {id: item.id}});
    },
    getSort() {
      this.$createHttp.sortSelect().then(res => {
        if (res.code === 200) {
          this.sorts = res.data
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      })
    },
    getLabel(sortId) {
      this.$createHttp.labelSelect(sortId).then(res => {
        if (res.code === 200) {
          this.labels = res.data
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      })
    },
    sortChange(sortId) {
      this.select = false;
      this.getLabel(sortId);
    },
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-input {
  width: 160px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.mrb10 {
  margin-right: 10px;
  margin-bottom: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.pagination {
  margin: 20px 0;
  text-align: right;
}
</style>
